import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Form, Modal, message, Spin} from 'antd';
import {formatMessage} from './intl';
import TextInput from 'Shared/components/TextInput';
import {FORM_BIG_OPTIONS} from '../constants';
import {updatePartWarrantyCategory, getPartWarrantyCategoryDetail} from './api';
import {validateAdd} from './validate';
const FormItem = Form.Item;

class FormContnet extends Component {
    state = {
        form: {
            name: '',
            remark: '',
        },
        loading: false,
        isValidate: false
    }
        
    componentDidMount() {
        this.setState({
            loading: true
        });
        getPartWarrantyCategoryDetail(this.props.id).then(res => {
            if(res.ok) this.setState({
                form: res.data,
                loading: false
            });
            else this.setState({
                loading: false
            });
        });
    }

    onChange = (value, name) => {
        this.setState({
            form: {
                ...this.state.form,
                [name]: value
            }
        });
    }

    
    onSubmit = () => {
        const result = validateAdd(this.state.form);
        if(result) {
            this.setState({isValidate: true});
            return message.warn(result);
        }
        const data = {
            name: this.state.form.name,
            remark: this.state.form.remark,
            rowVersion: this.state.form.rowVersion,
        };
        this.setState({loading: true});
        return updatePartWarrantyCategory(this.props.id, data).then(res => {
            if(res.ok && typeof this.props.afterSubmit === 'function')
                this.props.afterSubmit();
            return res;
        });
    }

    render() {
        const {form} = this.state;
        const generateValidateStatus = value => this.state.isValidate && !value ? 'error' : null;
        return (
            <Spin spinning={this.state.loading}>
                <Form className="form-standard">
                    <FormItem
                        label={formatMessage({
                            id: 'add.form.dealerId',
                            defaultMessage: '总代'
                        })}
                        required
                        validateStatus={generateValidateStatus(form.dealerId)}
                        {...FORM_BIG_OPTIONS.item}>
                        {`(${form.dealerCode})${form.dealerName}`}
                    </FormItem>
                    <FormItem
                        label={formatMessage({
                            id: 'add.form.code',
                            defaultMessage: '编号'
                        })}
                        required
                        validateStatus={generateValidateStatus(form.code)}
                        {...FORM_BIG_OPTIONS.item}>
                        {form.code}
                    </FormItem>
                    <FormItem
                        label={formatMessage({
                            id: 'add.form.name',
                            defaultMessage: '名称'
                        })}
                        required
                        validateStatus={generateValidateStatus(form.name)}
                        {...FORM_BIG_OPTIONS.item}>
                        <TextInput
                            name="name"
                            value={form.name}
                            onBlur={this.onChange}/>
                    </FormItem>
                    <FormItem
                        label={formatMessage({
                            id: 'add.form.remark',
                            defaultMessage: '备注'
                        })}
                        {...FORM_BIG_OPTIONS.item}>
                        <TextInput
                            name="remark"
                            type="textarea"
                            value={form.remark}
                            onBlur={this.onChange}/>
                    </FormItem>
                </Form>
            </Spin>
        );
    }
}

export default class EditModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
        this.formRef = React.createRef();
    }

    onOk = () => {
        this.formRef.current.onSubmit().then(res => {
            if(res.ok) this.props.onCancel();
            this.setState({
                loading: false
            });
        });
    }

    render() {
        const {loading} = this.state;
        return (
            <div>
                <Modal
                    title={formatMessage({
                        id: 'editModal.modal.title',
                        defaultMessage: '编辑'
                    })}
                    maskClosable={false}
                    visible={this.props.visible}
                    destroyOnClose={true}
                    okText={formatMessage({
                        id: 'editModal.modal.okText',
                        defaultMessage: '保存'
                    })}
                    onOk={this.onOk}
                    confirmLoading={loading}
                    onCancel={this.props.onCancel}>
                    <FormContnet id={this.props.id} afterSubmit={this.props.afterSubmit} ref={this.formRef} />
                </Modal>
            </div>
        );
    }
}

EditModal.propTypes = {
    visible: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    afterSubmit: PropTypes.func,
    id: PropTypes.string,
};
